<template>
  <div class="editor-toolbar" @mousedown="handleMouseDown" ref="toolbar">
    <!-- 工具按钮组 -->
    <div class="tool-buttons">
      <cg-button
        v-for="tool in tools"
        :key="tool.type"
        :class="{ active: currentTool === tool.type }"
        @click="$emit('tool-change', tool.type)"
      >
        {{ tool.label }}
      </cg-button>
    </div>

    <!-- 颜色选择器 -->
    <div class="color-picker">
      <label>填充颜色：</label>
      <input type="color" @input="selectColor" :value="currentColor" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { hasClass } from '../../tools/dom'

const toolbar = ref()
const toolbarParent = ref<any>(null)
// 拖动相关状态
const dragStartX = ref(0)
const dragStartY = ref(0)
const initialLeft = ref(0)
const initialTop = ref(0)
const isDragging = ref(false)

// 定义工具类型（可根据需求扩展）
const tools = [
  { type: 'select', label: '选择' },
  { type: 'move', label: '移动' },
  { type: 'drawRect', label: '矩形' } // 新增
  // 后续可添加 resize/delete 等工具
]

// 接收父组件传递的当前工具状态（用于高亮按钮）
defineProps<{
  currentTool: string
  currentColor: string
}>()

// 定义触发的事件
const $emit = defineEmits(['tool-change', 'color-change'])

// 鼠标按下开始拖动
const handleMouseDown = (e: MouseEvent) => {
  if (toolbar.value instanceof HTMLElement) {
    toolbarParent.value = document.querySelector(
      '.editor-panel > .editor-panel-content'
    ) as HTMLElement // 调整为更精确的父容器选择器（直接子元素）
  }
  if (hasClass(e.target, 'editor-toolbar')) {
    isDragging.value = true
    dragStartX.value = e.clientX
    dragStartY.value = e.clientY
    initialLeft.value = parseFloat(getComputedStyle(e.target as HTMLElement).left) || 0
    initialTop.value = parseFloat(getComputedStyle(e.target as HTMLElement).top) || 0
    // 添加全局事件监听
    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)
  }
}

// 鼠标移动更新位置
const handleMouseMove = (e: MouseEvent) => {
  if (!isDragging.value) return
  const deltaX = e.clientX - dragStartX.value
  const deltaY = e.clientY - dragStartY.value
  if (toolbar.value && toolbarParent.value) {
    // 获取父容器和工具栏尺寸
    const parentWidth = toolbarParent.value.clientWidth
    const parentHeight = toolbarParent.value.clientHeight
    console.log([toolbar.value, toolbarParent.value])
    const toolbarWidth = toolbar.value.offsetWidth
    const toolbarHeight = toolbar.value.offsetHeight
    // 计算限制后位置
    const newLeft = Math.max(0, Math.min(initialLeft.value + deltaX, parentWidth - toolbarWidth))
    const newTop = Math.max(0, Math.min(initialTop.value + deltaY, parentHeight - toolbarHeight))
    // 应用位置
    toolbar.value.style.left = `${newLeft}px`
    toolbar.value.style.top = `${newTop}px`
  }
}

// 鼠标抬起结束拖动
const handleMouseUp = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
}

const selectColor = ($event: any) => {
  $emit('color-change', $event.target.value)
}
</script>

<style lang="scss">
.editor-toolbar {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1rem 2rem;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  gap: 1rem;
  user-select: none;
  /* 防止拖动时选中文本 */
  cursor: move;
  /* 提示可拖动 */

  .tool-buttons {
    display: flex;
    gap: 0.5rem;

    .cg-button {
      cursor: pointer;

      &.active {
        button {
          border-color: #fff;
        }
      }
    }
  }

  .color-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    input[type='color'] {
      width: 40px;
      height: 30px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
</style>
